<template>
	<div>
		<!-- 头部导航 -->
		<div class="da1">
			<!-- 面包屑导航 -->
			<el-menu style="width: 100%;height: 60px;background-color: rgb(245,245,245);" class="el-menu-demo"
				mode="horizontal">
				<el-menu-item class="el-icon-s-home" index="1" @click="welcome()">众筹首页</el-menu-item>
				<el-menu-item class="el-icon-menu" index="2" @click="xmzl()">项目总览</el-menu-item>
				<el-menu-item class="el-icon-edit-outline" index="3" @click="agree()">发起众筹</el-menu-item>
				<el-menu-item class="el-icon-s-custom" index="4" @click="user()">我的众筹</el-menu-item>
			</el-menu>
		</div>

		<!-- 项目名称和介绍 -->
		<div class="xmmcjs">
			<div style="margin-left: 60px;">
				<p style="font-size: 25px;font-weight: 500;">{{project.projectName}}</p>
				<p style="font-weight: 300;margin-top: -20px;">
					{{project.projectMessage}}
				</p>
			</div>
			<el-button style="position: relative;left: 950px;bottom: 30px;" @click="isFollow()">
				<p style="color: palevioletred;font-size: 15px;display: inline;">❤</p>&nbsp;&nbsp;关注&nbsp;&nbsp;{{Follow}}
			</el-button>
		</div>

		<div class="xqt">
			<div style="float: left;width: 60%;">
				<img style="width: 100%;float: left;"
					:src="'http://localhost:8080/vueload?filename='+project.projectTouImg">
				<div v-for="img in project.images" :key="img">
					<el-image style="float: left;" :src="'http://localhost:8080/vueload?filename='+img"
						:fit="'scale-down'"></el-image>
				</div>
			</div>

			<div style="width: 35%;border: #D1C2D8 1px solid;float: right;">
				<div style="margin-left: 20px;margin-top: 10px;">
					<el-tag type="success"> <i class="el-icon-loading"></i> 众筹中</el-tag>

					<p style="font-size: 25px;">已筹资金：￥{{payMoney}}</p>
					<div style="margin-top: -20px;">
						<p style="font-size: 15px;font-weight: 350;">目标金额 ： {{project.projectAllMoney}}</p>
						<p style="font-size: 15px;position: relative;left: 250px;bottom: 35px;">达成 ： {{progress}}%</p>
					</div>
					<el-progress :text-inside="true" :stroke-width="24" :percentage="progress" status="success" class="jindu"></el-progress>

					<p style="font-size: 15px;position: relative;bottom: 40px;">剩余&nbsp;{{endTime}}&nbsp;天</p>
					<p style="font-size: 15px;position: relative;bottom: 40px;">已有{{people}}人支持该项目</p>
					<!-- <el-button style="position: relative;bottom: 40px;width: 95%;" type="warning" plain
						@click="dialogFormVisible = true">立即支持</el-button>		 -->	 

			</div>
			<div style="width: 100%;height: 150px;border-top: #D1C2D8 1px solid;border-bottom: #D1C2D8 1px solid;">
					<img src="../img/services-box2.jpg" width="110px"height="100px" style="margin-left: 20px;margin-top: 10px;">
					<div style="margin-left: 40%;position: relative;bottom: 120px;">
						<p style="font-size: 20px;">{{faqiren.introduce}}</p>
						<p style="font-size: 10px;width: 130px;position: relative;bottom: 10px;">{{faqiren.text}}</p>
						<el-tag style="position: relative;left: 60%;" type="success">已认证</el-tag>
					</div>
				</div>


				<el-card class="box-card">
					<div v-for="hb in huibao" :key="hb" class="text item">
						<div
							style="margin: 0 auto; width: 95%;height:400px;border: #D1C2D8 1px solid;margin-bottom: 20px;position: relative;bottom: 20px;">
							<div
								style="width: 100%;height: 100px;background-color: rgb(245,245,245);position: relative;bottom: 30px;">
								<P style="font-size: 30px;position: relative;left: 25px;top: 25px;">￥{{hb.payMoney}}</P>
								<p style="float: right;margin-right: 20px;position: relative;bottom: 40px;">
									<span v-if="hb.retuNumber==0">无限额</span>
									<span v-if="hb.retuNumber!=0">限额{{hb.retuNumber}}位</span>
									，{{people}}位支持者
								</p>


							</div>
							<div style="margin-left: 25px;">
								<p>配送费用： <span v-if="hb.isEmail==0">包邮</span>
									<span v-if="hb.isEmail!=0">{{hb.isEmail}}</span>
								</p>
								<p>预计发放时间：项目筹款成功后的50天内</p>
								<el-button type="success" plain @click="zhichianniu(hb.retuId)">支持</el-button>
								<p style="margin-right: 20px;">{{hb.retuText}}</p>
							</div>
						</div>
					</div>
				</el-card>

				<div class="fxts">
					<div
						style="width: 100%;height: 100px;background-color: rgb(245,245,245);position: relative;bottom: 30px;">
						<p style="font-size: 30px;position: relative;left: 25px;top: 25px;">风险提示</p>

					</div>
					<div>
						<p
							style="margin-left: 20px;margin-right: 20px;position: relative;bottom: 40px;margin-top: 30px;">
							1.众筹并非商品交易，存在一定风险。支持者根据自己的判断选择、支持众筹项目，与发起人共同实现梦想并获得发起人承诺的回报。
							2.众筹平台仅提供平台网络空间及技术支持等中介服务，众筹仅存在于发起人和支持者之间，使用众筹平台产生的法律后果由发起人与支持者自行承担。
							3.本项目必须在2017-06-09之前达到￥10000.00 的目标才算成功，否则已经支持的订单将取消。订单取消或募集失败的，您支持的金额将原支付路径退回。
							4.请在支持项目后15分钟内付款，否则您的支持请求会被自动关闭。
							5.众筹成功后由发起人统一进行发货，售后服务由发起人统一提供；如果发生发起人无法发放回报、延迟发放回报、不提供回报后续服务等情况，您需要直接和发起人协商解决。
							6.如您不同意上述风险提示内容，您有权选择不支持；一旦选择支持，视为您已确认并同意以上提示内容。</p>
					</div>


				</div>
				<div style="width: 100%;">
				     <p style="font-size: 35px;margin-left: 10%;">为你推荐</p >
				     <hr style=" height:2px;border:none;border-top:2px dotted #185598;">
				     <el-card class="box-card">
				       <div v-for="o in guang1" :key="o" class="text item">
				        <div style="border: #D1C2D8 1px solid;width: 100%;height: 220px;">
				         <!-- < img style="width: 93%;height: 200px;margin-top: 10px;margin-left: 10px;" src="../img/2.jpg"> -->
				      
				      <el-link @click="zhichi1(o.projectId)">
				         <el-image 
				          :src="'http://localhost:8080/vueload?filename='+o.advertImg" :fit="fit">
				         </el-image>
				       </el-link> 
				        
				        </div>
				       </div>
				     </el-card>
				    </div>
				<div style="clear: both;"></div>
			</div>
		</div>
		<!-- 支持弹出框 -->
		<el-dialog title="选择支持项" :visible.sync="dialogFormVisible">
			<hr style=" height:2px;border:none;border-top:2px dotted #185598;">
			<div style="width: 100%;height: 300px;">
				<div style="width: 20%;height: 300px;float: left;border-right: 5px #D1C2D8 solid;" >
					<div v-for="hb in huibao" :key="hb">
					<el-button type="success" plain style="width: 100px;margin-top: 10px;margin-bottom: 10px;margin-left: 10px;" @click="selectHbByProId(hb.retuId)">{{hb.payMoney}}</el-button>					
					</div>
				</div>
				<div style="width: 70%;height: 300px;float: right;">
					<p style="font-size: 30px;display: inline;">￥{{zhichi.payMoney}}</p>
					<p style="display: inline;margin-left: 50px;"><span v-if="zhichi.retuNumber==0">无限额</span>
									<span v-if="zhichi.retuNumber!=0">限额{{zhichi.retuNumber}}</span>
									，{{people}}位支持者</p>
					<hr style=" height:2px;border:none;border-top:2px dotted #185598;">
					<p>配送费用：<span v-if="zhichi.isEmail==0">包邮</span>
									<span v-if="zhichi.isEmail!=0">{{zhichi.isEmail}}</span></p>
					<p>预计发放时间：项目筹款成功后的30天内</p>
					<el-button type="warning" plain @click="dingdan1(zhichi.retuId)">支持</el-button>
					<p>{{zhichi.retuText}}</p>
				</div>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				dialogFormVisible: false,
				project: {},
				faqiren: {},
				huibao: [],
				Follow: 0,
				zhichi:{},
				renshu:'0',
				progress: 0,
				payMoney: 0,
				orderNumber:'',
				people:0,
				endTime:0,
				guang1:[]
			};
		},
		methods: {
			//首页
			welcome() {
				this.$router.push('/welcome')
			},
			
			//用户界面
			user() {
				this.$router.push('/user')
			},
			// 协议
			agree() {
				this.$router.push('/agree')
			},
			// 项目总览
			xmzl() {
				this.$router.push('/xmzl')
			},
			// 根据项目id查询
			async selectProjectByProjectId() {
				var projectId = window.sessionStorage.getItem("projectId");
				var param = new URLSearchParams();
				param.append("projectId", projectId);
				/* 根据项目id查询项目 */
				var res = await this.$http.post('/selectProjectByProjectId', param);
				this.project =   res.data &&   res.data.data[0] ;
				// 根据项目id查询发起人
				var res1 = await this.$http.post('/selectByPid', param);
				this.faqiren = res1.data.data
				// 根据项目id查询回报
				var res2 = await this.$http.post('/selectRetuTableByPId', param);
				this.huibao = res2.data.data
				//查询项目关注数量
				var res3 = await this.$http.post('/countFollow', param);
				this.Follow = res3.data.data
				//获取项目进度百分比
				var res4 = await this.$http.post('/selectProjectPlanned', param);
				this.progress = res4.data.data[1]/100
				this.payMoney = res4.data.data[0]
				this.$forceUpdate()
				//获取项目支持认数
				var res5 = await this.$http.post('/selectOrderByPId', param);
				this.people = res5.data.data
				
				console.log(this.people)
				//获取距离项目结束天数
				var res6 = await this.$http.post('/selectPEndTimeByPId', param);
				if(res6.data.code==200){
					this.endTime = res6.data.data
					if(this.endTime < 0){
						this.endTime = 0
					}
				}
				
			},
			//是否项目关注
			async isFollow(){
				var projectId = window.sessionStorage.getItem("projectId");
				var userId = window.sessionStorage.getItem("userId");
				var param = new URLSearchParams();
				param.append("projectId", projectId);
				param.append("userId", userId);
				var res = await this.$http.post('/insertFollowMapper',param)
				if(res.data.code==200){
					var res3 = await this.$http.post('/countFollow', param);
					this.Follow = res3.data.data
				}
			},
			// 根据回报id查询回报
			async selectHbByProId(retuId){
				var param = new URLSearchParams();
				param.append("retuId", retuId);
				var res = await this.$http.post('/selectRetuTableByRIds',param)
				if(res.data.code==200){
					this.zhichi = res.data.data
				}
			},
			// 支持按钮
			async zhichianniu(retuId){
				var param = new URLSearchParams();
				param.append("retuId", retuId);
				var res = await this.$http.post('/selectRetuTableByRIds',param)
				if(res.data.code==200){	
					this.zhichi = res.data.data
					this.dialogFormVisible = true
				}
			},
			//广告
			async guang(){
				
				var res=await this.$http.get('queryAdvertSj')
				this.guang1=res.data.data
			},
			// 广告跳转支持
			async zhichi1(val) {								
					var param = new URLSearchParams();
					param.append("projectId",val);
					var res = await this.$http.post('/selectProjectByProjectId',param);
					if(res.data.code==200){		
						window.sessionStorage.setItem('projectId',val)						
							this.$router.push('/zhichi1')						
					}else{
						this.$message.error('此项目已下线或已结束!')
					}
														
			},
			// 支持跳转订单
			async dingdan1(val) {								
					var param = new URLSearchParams();
					param.append("retuId",val);
					var res = await this.$http.post('/selectRetuTableByRIds',param);	
					
					var res1 = await this.$http.post('/selectOrderNumberByRetuID',param)
					this.orderNumber = res1.data.data
					if(res.data.code==200){		
						window.sessionStorage.setItem('retuId',val)												
							if(this.zhichi.retuNumber>this.orderNumber||this.zhichi.retuNumber==0||this.orderNumber==0){
								this.$router.push('/dingdan1')	
							}else{
								this.$message.error('此支持限制数量已满!请请更换支持')
							}
												
					}else{
						this.$message.error('此项目已下线或已结束!')
					}
														
			},
			// // 订单
			// dingdan1(){
			// 	this.$router.push('/dingdan1')
			// },
		},
		mounted() {
			this.selectProjectByProjectId();
			this.guang();
		}
	}
</script>

<style>
	.xmmcjs {
		width: 100%;
		margin-top: 20px;
		height: 120px;
		margin-left: -50px;
		background-color: rgb(245, 245, 245);
		border: #D1C2D8 solid 1px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 4px;
	}

	.xqt {
		width: 100%;
		margin-top: 20px;
		margin-left: -50px;
		overflow: hidden;
	}

	.jindu {
		position: relative;
		bottom: 40px;
		width: 340px;
	}

	.text {
		font-size: 14px;
	}

	.item {
		padding: 18px 0;
	}

	.box-card {
		float: right;
		width: 96%;
		border: #D1C2D8 1px solid;
		margin-top: 10%;
		margin-right: 2%;
	}

	.fxts {
		float: right;
		width: 100%;
		border-top: #D1C2D8 1px solid;
		border-bottom: #D1C2D8 1px solid;
		margin-top: 5%;
		margin-bottom: 5%;
	}
</style>
